<div id="page-body">
  <div class='row'>
    <div class='alert alert-info'>
      <i class="fa-solid fa-exclamation"></i> This is no longer a plugin. It's now included directly.
    </div>
    <p>
      Use the boxes below to set a format string and the locale of the sample picker and click "Change" to update the
      options.
    </p>
  </div>

  <div class='row'>
    <div class='container'>
      <div class='row'>
        <div class='col-6'>
          <div class='mb-3'>
            <label for='format' class='form-label'>Format</label>
            <input
              type='text'
              class='form-control'
              id='format'
              value='dd/MM/yyyy HH:mm'
            />
          </div>
        </div>
        <div class='col-6'>
          <div class='mb-3'>
            <label for='locale' class='form-label'>Locale</label>
            <input type='text' class='form-control' id='locale' value='pt-BR' />
          </div>
        </div>
        <div class='col-6'>
          <div class='mb-3'>
            <button type='button' class='btn btn-primary' id='change'>
              Change
            </button>
          </div>
        </div>
      </div>
      <div class='row'>
        <div class='col-sm-6'>
          <label for='datetimepicker1Input' class='form-label'>Sample picker</label>
          <div
            class='input-group'
            id='datetimepicker1'
            data-td-target-input='nearest'
            data-td-target-toggle='nearest'
          >
            <input
              id='datetimepicker1Input'
              type='text'
              class='form-control'
              data-td-target='#datetimepicker1'
            />
            <span
              class='input-group-text'
              data-td-target='#datetimepicker1'
              data-td-toggle='datetimepicker'
            >
               <span class='fas fa-calendar'></span>
             </span>
          </div>
        </div>
      </div>
    </div>
    <script src='/6/js/plugins/customDateFormat.js'></script>
    <script type='text/javascript'>
      const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),
        {
          localization: {
            locale: 'pt-BR',
            format: 'dd/MM/yyyy HH:mm'
          }
        });

      document.getElementById('change').addEventListener('click', () => {
        datetimepicker1.updateOptions({
          localization: {
            locale: document.getElementById('locale').value,
            format: document.getElementById('format').value
          }
        });
        datetimepicker1.dates.setValue(new tempusDominus.DateTime());
      });
    </script>
  </div>

  <div class='row'>
    <pre>
<code class='language-js'>//example picker
const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker'), {
  localization: {
    locale: 'pt-BR',
    format: 'dd/MM/yyyy HH:mm',
  }
});
</code>
    </pre>
  </div>

  <div class='row'>
    <h2>Format Tokens</h2>
    <div class='col-12'>
      <p id='token-description'>
        The format supports the following tokens. Given 2022-07-04T15:13:29.474Z
      </p>
      <table class='table table-striped' aria-describedby='token-description'>
        <thead>
        <tr>
          <th>Token</th>
          <th>Description</th>
          <th>Result</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>yy</td>
          <td>2 digit year</td>
          <td>22</td>
        </tr>
        <tr>
          <td>yyyy</td>
          <td>4 digit year</td>
          <td>2022</td>
        </tr>
        <tr>
          <td>M</td>
          <td>1-2 digit month, e.g. 1...12</td>
          <td>7</td>
        </tr>
        <tr>
          <td>MM</td>
          <td>2 digit month</td>
          <td>07</td>
        </tr>
        <tr>
          <td>MMM</td>
          <td>Short Month</td>
          <td>Jul</td>
        </tr>
        <tr>
          <td>MMMM</td>
          <td>Full Month</td>
          <td>July</td>
        </tr>
        <tr>
          <td>d</td>
          <td>1-2 digit day, e.g. 1...31</td>
          <td>4</td>
        </tr>
        <tr>
          <td>dd</td>
          <td>2 digit day</td>
          <td>04</td>
        </tr>
        <tr>
          <td>ddd</td>
          <td>Short Weekday</td>
          <td>Mon</td>
        </tr>
        <tr>
          <td>dddd</td>
          <td>Full Weekday</td>
          <td>Monday</td>
        </tr>
        <tr>
          <td>H</td>
          <td>1-2 digit hour (24 hour)</td>
          <td>13</td>
        </tr>
        <tr>
          <td>HH</td>
          <td>2 digit hour (24 hour)</td>
          <td>13</td>
        </tr>
        <tr>
          <td>h</td>
          <td>1-2 digit hour (12 hour)</td>
          <td>1 (PM)</td>
        </tr>
        <tr>
          <td>hh</td>
          <td>2 digit hour (12 hour)</td>
          <td>01 (PM)</td>
        </tr>
        <tr>
          <td>m</td>
          <td>1-2 digit minute, e.g. 0...59</td>
          <td>29</td>
        </tr>
        <tr>
          <td>mm</td>
          <td>2 digit minute, e.g. 0...59</td>
          <td>29</td>
        </tr>
        <tr>
          <td>s</td>
          <td>1-2 digit second, e.g. 0...59</td>
          <td>47</td>
        </tr>
        <tr>
          <td>ss</td>
          <td>2 digit second, e.g. 0...59</td>
          <td>47</td>
        </tr>
        <tr>
          <td>T</td>
          <td>Meridiem</td>
          <td>PM</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div id="page-meta">
  <div id="title">Custom Date Formats</div>
  <div id="post-date">01/19/2022</div>
  <div id="update-date">01/26/2023</div>
  <div id="excerpt">How to use custom date format plugin with Tempus Dominus.</div>
  <div id="tags">datepicker, javascript, open source, tempus dominus, eonasdan</div>
</div>
